<!-- eslint-disable vue/require-component-is -->
<template>
  <div class="action-items-wrapper" id="info_phpstudy_net">
    <div class="aaa">
      <span>
        <a-button
          v-if="showV"
          type="primary"
          style="width: 75px; height: 30px; font-size: 13px"
          size="mini"
          @click="href"
        >
          帮助文档</a-button
        >
        <a-dropdown v-else :popup-max-height="false">
          <a-button type="primary" size="mini" style="height: 30px; font-size: 13px"
            >余额{{ userForm.balance }}元 <icon-down
          /></a-button>
          <template #content>
            <a-doption @click="chong">立即充值</a-doption>
            <a-doption @click="open">立即提现</a-doption>
            <a-doption @click="openBlance">设置预警</a-doption>
          </template>
        </a-dropdown>
      </span>
      <a-button
        v-if="showV"
        type="primary"
        style="width: 75px; height: 30px; font-size: 13px; margin-left: 15px"
        size="mini"
        @click="openUrl"
        status="warning"
      >
        链接地址</a-button
      >
      <component
        v-if="showV"
        is="i-upload-logs"
        strokeWidth="2"
        @click="logFn"
        style="font-size: 18px; margin-left: 20px"
      />
      <component
        v-if="aab"
        strokeWidth="2"
        is="i-full-screen"
        @click="onScreenFull"
        style="font-size: 18px; margin-left: 20px"
      />
      <component
        v-else
        is="i-off-screen"
        strokeWidth="2"
        @click="onScreenFull"
        style="font-size: 18px; margin-left: 20px"
      />

      <component
        is="i-redo"
        strokeWidth="2"
        @click="onRefrehRoute"
        style="font-size: 18px; margin-left: 20px"
      />
      <component
        v-if="showV"
        is="i-theme"
        strokeWidth="2"
        @click="onShowSetting"
        style="font-size: 18px; margin-left: 20px"
      />
      <span style="width: 30px; height: 30px; margin-left: 20px">
        <img style="width: 100%; height: 30px; border-radius: 50%" :src="urlImg" />
      </span>
      <span style="margin-left: 10px; color: var(--color-neutral-10)"><VAWavatar /> </span>
    </div>
    <a-modal
      v-model:visible="visible"
      title="立即充值"
      :mask-closable="false"
      title-align="start"
      :onBeforeClose="beforClose"
    >
      <a-form ref="detailRef" :model="detailForm">
        <a-form-item
          v-if="balanceList.length <= 0"
          field="name"
          label="充值金额"
          :rules="[{ required: true, message: '充值金额不能为空' }]"
          prop="name"
          asterisk-position="end"
        >
          <a-input-number :mix="1" @change="changeFnswww" v-model="detailForm.name" />
        </a-form-item>
        <a-form-item
          v-else
          field="name"
          label="选择金额"
          :rules="[{ required: true, message: '充值金额不能为空' }]"
          prop="name"
          asterisk-position="end"
        >
          <div style="display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap">
            <div
              @click="clickBalance(item, index)"
              v-for="(item, index) in balanceList"
              :key="index"
              :class="activeBalanceKey == index ? 'activeBalance' : 'activeBalance1'"
              style="position: relative"
              ><div
                style="
                  width: 100%;
                  background-color: #f2f3f5;
                  border-radius: 5px;
                  height: 80px;
                  text-align: center;
                  line-height: 80px;
                  font-size: 16px;
                "
              >
                {{ item }}元
              </div>
              <img
                v-if="activeBalanceKey == index"
                style="position: absolute; right: 0px; bottom: 0; width: 40px; height: 40px"
                src="@/assets/right-dui2.png"
                alt=""
              />
            </div>
            <div style="width: calc((100% - 40px) / 3)"></div>
          </div>
        </a-form-item>
        <a-form-item field="price" label="手续费" prop="price">
          <a-input-number v-model="detailForm.price" read-only />
        </a-form-item>
        <a-form-item field="price" label="实际到账" prop="realNum">
          <a-input-number v-model="detailForm.realNum" read-only />
        </a-form-item>
        <a-form-item label="支付方式" field="payType">
          <a-radio-group
            @change="getPay(detailForm.payType)"
            class="radio-bcg"
            v-model="detailForm.payType"
          >
            <a-radio v-for="(item, index) in typelist" :key="index" :value="index">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">{{ item.name }}</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item field="payId" v-if="detailForm.payList.length > 1" label="支付商户">
          <a-select
            placeholder="请选择支付商户"
            allow-search
            v-model="detailForm.payId"
            allow-clear
            @change="getPayFn(detailForm.payId)"
          >
            <a-option v-for="item in detailForm.payList" :key="item.id" :value="item.id">{{
              item.name
            }}</a-option>
          </a-select>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="beforClose">取消</a-button>
          <a-button type="primary" :loading="loading" @click="ok">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <a-modal
      v-model:visible="visibles"
      :title="path.length > 1 ? '扫码登录' : '扫码支付'"
      width="280px"
      :mask-closable="false"
      title-align="start"
      hide-cancel
      hide-ok
      :before-close="beforClosew"
    >
      <div>
        <div v-if="path.length < 1" style="text-align: center">
          ￥<span style="font-size: 26px">{{ detailForm.name }}</span>
        </div>
        <img style="width: 240px; height: 240px" :src="seachForm.imgUrl" alt="" />
      </div>
      <template #footer>
        <a-space>
          <a-button type="primary" v-if="path.length > 1" :loading="loadings" @click="paySuccessFn">
            我已登录
          </a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 更新 -->
    <a-modal
      v-model:visible="renewVisible"
      :mask-closable="false"
      title-align="start"
      width="600px"
      hide-cancel
      :closable="false"
      :esc-to-close="false"
      hide-ok
    >
      <template #title>
        <div
          style="
            display: flex;
            justify-content: space-between;
            width: 100%;
            line-height: 30px;
            text-align: center;
          "
        >
          <div style="font-size: 16px">{{ data.versionName }}</div>
          <div style="font-size: 12px">发布于：{{ data.createTime }}</div>
        </div>
      </template>
      <div style="padding: 20px; background-color: #f7faff; height: 500px; overflow: auto">
        <div v-html="data.text"> </div>
      </div>
      <a-progress
        v-if="renewForm.proportion"
        :percent="renewForm.proportion"
        :show-text="false"
        size="large"
        :style="{ width: '100%', marginTop: '20px' }"
      />

      <div v-if="renewForm.message" style="margin-top: 20px">{{ renewForm.message }} </div>
      <template #footer>
        <a-space>
          <a-button
            v-if="showse == false"
            :loading="loadings"
            @click=";(renewVisible = false), (showse = false)"
          >
            暂不更新
          </a-button>
          <a-button v-if="showse == false" type="primary" :loading="loadings" @click="SSE">
            立即更新
          </a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 查看公告 -->
    <a-modal
      v-for="item in accList"
      :key="item.id"
      v-model:visible="item.show"
      :mask-closable="false"
      width="800px"
      title="查看公告"
      title-align="start"
      @before-close="beforeClose(item)"
    >
      <div>
        <div
          style="
            display: flex;
            justify-content: space-between;
            padding: 10px;
            background-color: #e8f7ff;
            color: #3491fa;
          "
        >
          <div> 公告发布时间：{{ item.addTime ? item.addTime : item.createTime }} </div>
          <a-tag v-if="item.type == 2 && item.createTime" color="red">重要</a-tag>
          <a-tag v-else-if="item.type == 1 && item.createTime" color="arcoblue">普通</a-tag>
          <a-tag v-else-if="item.type == 1 && item.addTime" color="red">重要</a-tag>
          <a-tag v-else-if="item.type == 0 && item.addTime" color="arcoblue">普通</a-tag>
        </div>
        <div style="color: #3491fa; font-size: 16px; text-align: center; padding: 20px">{{
          item.title
        }}</div>
        <div id="notice" v-html="item.content" style="padding: 20px"></div>
      </div>
      <template #footer>
        <a-space>
          <!-- <a-button type="primary" @click="refundFn">原路退款</a-button> -->
        </a-space>
      </template>
    </a-modal>
    <a-modal
      v-model:visible="visiblesa"
      title-align="start"
      title="系统链接"
      @before-close="beforeClose1"
    >
      <a-collapse
        @change="getUrl"
        accordion
        expand-icon-position="right"
        v-model:active-key="position"
      >
        <template #expand-icon="{ active }">
          <icon-down class="active" v-if="active" />
          <icon-right v-else />
        </template>
        <a-collapse-item header="总后台" key="1">
          <template #header>
            <div :class="position[0] == '1' ? 'active' : ''">总后台</div>
          </template>
          <div style="display: flex; justify-content: center; margin: 20px">
            <a-image
              style="width: 170px; height: 170px; text-align: center"
              :src="imgUrl"
              show-loader
            />
          </div>
          <div style="display: flex; justify-content: center">
            <div
              style="
                width: 390px;
                background-color: #f2f3f5;
                border-radius: 4px;
                text-align: center;
                padding: 4px;
              "
            >
              <a id="bols" :href="url" style="color: #000000" target="_blank">
                {{ url }}
              </a>
            </div>
          </div>
          <div style="display: flex; justify-content: center; margin: 20px">
            <div style="display: flex; width: 390px; justify-content: space-between">
              <a-button type="primary" status="success" long @click="downs">保存二维码</a-button>
              <div style="width: 40px"></div>
              <a-button type="primary" long @click="useCommon.copy(url)">复制链接</a-button>
            </div>
          </div>
          <div style="display: flex; justify-content: center; margin: 20px">
            <div style="display: flex; width: 390px; justify-content: space-between">
              <a-button type="primary" status="warning" long
                >微信公众号和微信商户添加链接请使用总后台链接</a-button
              >
            </div>
          </div>
        </a-collapse-item>
        <a-collapse-item header="充值端" key="4">
          <template #header>
            <div :class="position[0] == '4' ? 'active' : ''">充值端</div>
          </template>
          <div style="display: flex; justify-content: center; margin: 20px">
            <a-image
              style="width: 170px; height: 170px; text-align: center"
              :src="imgUrl"
              show-loader
            />
          </div>
          <div style="display: flex; justify-content: center">
            <div
              style="
                width: 390px;
                background-color: #f2f3f5;
                border-radius: 4px;
                text-align: center;
                padding: 4px;
              "
            >
              <a id="bols" :href="url" style="color: #000000" target="_blank">
                {{ url }}
              </a>
            </div>
          </div>
          <div style="display: flex; justify-content: center; margin: 20px">
            <div style="display: flex; width: 390px; justify-content: space-between">
              <a-button type="primary" status="success" long @click="downs">保存二维码</a-button>
              <div style="width: 40px"></div>
              <a-button type="primary" long @click="useCommon.copy(url)">复制链接</a-button>
            </div>
          </div>
          <div style="display: flex; justify-content: center; margin: 20px">
            <div style="display: flex; width: 390px; justify-content: space-between">
              <a-button type="primary" status="warning" long>卡号登录充值请使用这个链接</a-button>
            </div>
          </div>
        </a-collapse-item>
        <a-collapse-item header="代理电脑端" key="2">
          <template #header>
            <div :class="position[0] == '2' ? 'active' : ''">代理电脑端</div>
          </template>
          <div style="display: flex; justify-content: center; margin: 20px">
            <a-image
              style="width: 170px; height: 170px; text-align: center"
              :src="imgUrl"
              show-loader
            />
          </div>
          <div style="display: flex; justify-content: center">
            <div
              style="
                width: 390px;
                background-color: #f2f3f5;
                border-radius: 4px;
                text-align: center;
                padding: 4px;
              "
            >
              <a id="bols" :href="url" style="color: #000000" target="_blank">
                {{ url }}
              </a>
            </div>
          </div>
          <div style="display: flex; justify-content: center; margin: 20px">
            <div style="display: flex; width: 390px; justify-content: space-between">
              <a-button type="primary" status="success" long @click="downs">保存二维码</a-button>
              <div style="width: 40px"></div>
              <a-button type="primary" long @click="useCommon.copy(url)">复制链接</a-button>
            </div>
          </div>
          <div style="display: flex; justify-content: center; margin: 20px">
            <div style="display: flex; width: 390px; justify-content: space-between">
              <a-button type="primary" status="warning" long>代理商登录请使用这个链接登录</a-button>
            </div>
          </div>
        </a-collapse-item>
        <a-collapse-item header="代理手机端" key="3">
          <template #header>
            <div :class="position[0] == '3' ? 'active' : ''">代理手机端</div>
          </template>
          <div style="display: flex; justify-content: center; margin: 20px">
            <a-image
              style="width: 170px; height: 170px; text-align: center"
              :src="imgUrl"
              show-loader
            />
          </div>
          <div style="display: flex; justify-content: center">
            <div
              style="
                width: 390px;
                background-color: #f2f3f5;
                border-radius: 4px;
                text-align: center;
                padding: 4px;
              "
            >
              <a id="bols" :href="url" style="color: #000000" target="_blank">
                {{ url }}
              </a>
            </div>
          </div>
          <div style="display: flex; justify-content: center; margin: 20px">
            <div style="display: flex; width: 390px; justify-content: space-between">
              <a-button type="primary" status="success" long @click="downs">保存二维码</a-button>
              <div style="width: 40px"></div>
              <a-button type="primary" long @click="useCommon.copy(url)">复制链接</a-button>
            </div>
          </div>
          <div style="display: flex; justify-content: center; margin: 20px">
            <div style="display: flex; width: 390px; justify-content: space-between">
              <a-button type="primary" status="warning" long>
                代理商登录请使用这个链接登录
              </a-button>
            </div>
          </div>
        </a-collapse-item>
        <a-collapse-item header="其他的操作链接" key="5">
          <div class="box1" style="margin-top: 12px">
            注意：链接后去除type=1将不会执行自动确认
          </div>
          <div class="box2" style="margin-top: 20px">
            <p class="links"> 官方实名：{{ returnUrl('/wap/pages/index/realName') }} </p>
            <div class="rights">
              <a-popover>
                <p class="btns" style="margin-right: 10px">二维码</p>
                <template #title>
                  <p style="font-size: 14px; text-align: center"></p>
                </template>
                <template #content>
                  <div class="codeBtn">
                    <img
                      :src="returnCode('/wap/pages/index/realName')"
                      class="codeImg"
                      style="width: 100px"
                      mode="widthFix"
                      alt=""
                    />
                    <a-button
                      type="text"
                      style="height: 25px; width: 120px"
                      @click="
                        downloadIamge(returnCode('/wap/pages/index/realName'), new Date().getTime())
                      "
                      >保存二维码</a-button
                    >
                  </div>
                </template>
              </a-popover>
              <p class="btns" @click="useCommon.copy(returnUrl('/wap/pages/index/realName'))"
                >复制链接</p
              >
            </div>
          </div>
          <div class="box2" style="margin-top: 20px">
            <p class="links"> 登录传参：{{ returnUrl('/wap/pages/index/index?card=&type=1') }} </p>
            <div class="rights">
              <a-popover>
                <p class="btns" style="margin-right: 10px">二维码</p>
                <template #title>
                  <p style="font-size: 14px; text-align: center"></p>
                </template>
                <template #content>
                  <div class="codeBtn">
                    <img
                      :src="returnCode('/wap/pages/index/index?card=&type=1')"
                      class="codeImg"
                      style="width: 100px"
                      mode="widthFix"
                      alt=""
                    />
                    <a-button
                      type="text"
                      style="height: 25px; width: 120px"
                      @click="
                        downloadIamge(
                          returnCode('/wap/pages/index/index?card=&type=1'),
                          new Date().getTime()
                        )
                      "
                      >保存二维码</a-button
                    >
                  </div>
                </template>
              </a-popover>
              <p
                class="btns"
                @click="useCommon.copy(returnUrl('/wap/pages/index/index?card=&type=1'))"
                >复制链接</p
              >
            </div>
          </div>
          <div class="box2" style="margin-top: 20px">
            <p class="links">
              设备管理：{{ returnUrl('/wap/pages/index/shebeiIndex?card=&type=1') }}</p
            >
            <div class="rights">
              <a-popover>
                <p class="btns" style="margin-right: 10px">二维码</p>
                <template #title>
                  <p style="font-size: 14px; text-align: center"></p>
                </template>
                <template #content>
                  <div class="codeBtn">
                    <img
                      :src="returnCode('/wap/pages/index/shebeiIndex?card=&type=1')"
                      class="codeImg"
                      style="width: 100px"
                      mode="widthFix"
                      alt=""
                    />
                    <a-button
                      type="text"
                      style="height: 25px; width: 120px"
                      @click="
                        downloadIamge(
                          returnCode('/wap/pages/index/shebeiIndex?card=&type=1'),
                          new Date().getTime()
                        )
                      "
                      >保存二维码</a-button
                    >
                  </div>
                </template>
              </a-popover>
              <p
                class="btns"
                @click="useCommon.copy(returnUrl('/wap/pages/index/shebeiIndex?card=&type=1'))"
                >复制链接</p
              >
            </div>
          </div>
          <div class="box2" style="margin-top: 20px; margin-bottom: 12px">
            <p class="links"> 智能检测：{{ returnUrl('/wap/pages/home/zhineng') }} </p>
            <div class="rights">
              <a-popover>
                <p class="btns" style="margin-right: 10px">二维码</p>
                <template #title>
                  <p style="font-size: 14px; text-align: center"></p>
                </template>
                <template #content>
                  <div class="codeBtn">
                    <img
                      :src="returnCode('/wap/pages/home/zhineng')"
                      class="codeImg"
                      style="width: 100px"
                      mode="widthFix"
                      alt=""
                    />
                    <a-button
                      type="text"
                      style="height: 25px; width: 120px"
                      @click="
                        downloadIamge(returnCode('/wap/pages/home/zhineng'), new Date().getTime())
                      "
                      >保存二维码</a-button
                    >
                  </div>
                </template>
              </a-popover>
              <p class="btns" @click="useCommon.copy(returnUrl('/wap/pages/home/zhineng'))"
                >复制链接</p
              >
            </div>
          </div>
          <div class="box2" style="margin-top: 20px; margin-bottom: 12px">
            <p class="links">
              余额充值：{{ returnUrl('/wap/pages/balance/balance?balanceNum=余额金额') }}
            </p>
            <div class="rights">
              <a-popover>
                <p class="btns" style="margin-right: 10px">二维码</p>
                <template #title>
                  <p style="font-size: 14px; text-align: center"></p>
                </template>
                <template #content>
                  <div class="codeBtn">
                    <img
                      :src="returnCode('/wap/pages/balance/balance?balanceNum=余额金额')"
                      class="codeImg"
                      style="width: 100px"
                      mode="widthFix"
                      alt=""
                    />
                    <a-button
                      type="text"
                      style="height: 25px; width: 120px"
                      @click="
                        downloadIamge(
                          returnCode('/wap/pages/balance/balance?balanceNum=余额金额'),
                          new Date().getTime()
                        )
                      "
                      >保存二维码</a-button
                    >
                  </div>
                </template>
              </a-popover>
              <p
                class="btns"
                @click="useCommon.copy(returnUrl('/wap/pages/balance/balance?balanceNum=余额金额'))"
                >复制链接</p
              >
            </div>
          </div>
          <div class="box2" style="margin-top: 20px; margin-bottom: 12px">
            <p class="links">
              套餐充值：{{ returnUrl('/wap/pages/home/setMealPayPage?mealId=套餐ID') }}
            </p>
            <div class="rights">
              <a-popover>
                <p class="btns" style="margin-right: 10px">二维码</p>
                <template #title>
                  <p style="font-size: 14px; text-align: center"></p>
                </template>
                <template #content>
                  <div class="codeBtn">
                    <img
                      :src="returnCode('/wap/pages/home/setMealPayPage?mealId=套餐ID')"
                      class="codeImg"
                      style="width: 100px"
                      mode="widthFix"
                      alt=""
                    />
                    <a-button
                      type="text"
                      style="height: 25px; width: 120px"
                      @click="
                        downloadIamge(
                          returnCode('/wap/pages/home/setMealPayPage?mealId=套餐ID'),
                          new Date().getTime()
                        )
                      "
                      >保存二维码</a-button
                    >
                  </div>
                </template>
              </a-popover>
              <p
                class="btns"
                @click="useCommon.copy(returnUrl('/wap/pages/home/setMealPayPage?mealId=套餐ID'))"
                >复制链接</p
              >
            </div>
          </div>
        </a-collapse-item>
      </a-collapse>
      <template #footer>
        <a-space />
      </template>
    </a-modal>
    <!-- 申请提现 -->
    <a-modal
      :mask-closable="false"
      @before-close="cancelscs"
      v-model:visible="showVs"
      title="立即提现"
      width="700px"
      title-align="start"
    >
      <a-form ref="tiRef" :auto-label-width="true" :model="showForm">
        <a-form-item label="提现途径" field="withdrawalVerification">
          <a-radio-group class="radio-bcg" v-model="showForm.type">
            <a-radio v-for="item in lists" :key="item.value" :value="item.value">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">{{ item.name }}</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          label="提现金额"
          :rules="[{ required: true, message: '提现金额不能为空' }]"
          :validate-trigger="['change', 'input']"
          field="amount"
          asterisk-position="end"
        >
          <a-input-number :min="1" placeholder="请输入提现金额" v-model.trim="showForm.amount" />
        </a-form-item>
        <a-form-item
          v-if="WithdrawalForm.withdrawalVerification == true"
          label="验证码"
          :rules="[
            {
              required: true,
              message: '验证码不能为空',
            },
          ]"
          :validate-trigger="['change', 'input']"
          field="code"
          asterisk-position="end"
        >
          <a-input placeholder="请输入验证码" v-model.trim="showForm.code" search-button>
            <template #append>
              <a-button
                type="primary"
                style="height: 25px; width: 100%"
                :loading="sendCode.disable"
                @click="smsFns"
                >{{ sendCode.codeText }}</a-button
              >
            </template>
          </a-input>
        </a-form-item>
        <a-form-item label="预估到账" field="text">
          <a-input placeholder="请输入预估到账" readonly v-model.trim="showForm.text" search-button>
            <template #append>
              <a-button type="text" @click="yugu">预估到账</a-button>
            </template>
          </a-input>
        </a-form-item>
        <a-form-item
          label="提现规则"
          v-if="
            WithdrawalForm.addWithdrawalDate ||
            WithdrawalForm.withdrawalDay ||
            WithdrawalForm.addAmount ||
            WithdrawalForm.withholdingTax ||
            WithdrawalForm.withdrawalServiceChargeMode ||
            WithdrawalForm.reserveBalance ||
            WithdrawalForm.integerLimit == 0 ||
            WithdrawalForm.integerLimit == 1 ||
            WithdrawalForm.integerLimit == 2 ||
            WithdrawalForm.integerLimit == 3 ||
            WithdrawalForm.integerLimit == 4
          "
        >
          <div
            style="
              background-color: var(--color-fill-2);
              width: 100%;
              line-height: 32px;
              border-radius: 5px;
              text-align: left;
              padding: 5px 10px;
            "
          >
            <div v-if="WithdrawalForm.addWithdrawalDate"
              >日期限制：{{ WithdrawalForm.addWithdrawalDate }}号-{{
                WithdrawalForm.endWithdrawalDate
              }}号可发起提现</div
            >
            <div v-if="WithdrawalForm.withdrawalDay"
              >时间限制：每{{ WithdrawalForm.withdrawalDay }}天可提现{{
                WithdrawalForm.withdrawalFrequency
              }}次</div
            >
            <div v-if="WithdrawalForm.addAmount"
              >金额限制：提现金额必须在{{ WithdrawalForm.addAmount }}元-{{
                WithdrawalForm.endAmount
              }}元之间</div
            >
            <div
              v-if="
                WithdrawalForm.integerLimit == 0 ||
                WithdrawalForm.integerLimit == 1 ||
                WithdrawalForm.integerLimit == 2 ||
                WithdrawalForm.integerLimit == 3 ||
                WithdrawalForm.integerLimit == 4
              "
              >整数限制：提现金额需要为
              <span v-if="WithdrawalForm.integerLimit == 0">整元</span>
              <span v-if="WithdrawalForm.integerLimit == 1">整十</span>
              <span v-if="WithdrawalForm.integerLimit == 2">整百</span>
              <span v-if="WithdrawalForm.integerLimit == 3">整千</span>
              <span v-if="WithdrawalForm.integerLimit == 4">整万</span>
            </div>
            <div v-if="WithdrawalForm.withholdingTax"
              >代扣税：每次提现代扣税{{ WithdrawalForm.withholdingTax }}%</div
            >
            <div v-if="WithdrawalForm.withdrawalServiceChargeMode"
              >提现手续费：每次提现手续费<span
                v-if="WithdrawalForm.withdrawalServiceChargeMode == 0"
                >{{ WithdrawalForm.withdrawalServiceChargeFixedAmount }}元</span
              >
              <span v-if="WithdrawalForm.withdrawalServiceChargeMode == 1"
                >{{ WithdrawalForm.withdrawalServiceChargeRate }}%</span
              >
              <span v-if="WithdrawalForm.withdrawalServiceChargeMode == 2"
                >{{ WithdrawalForm.withdrawalServiceChargeFixedAmount }}元+{{
                  WithdrawalForm.withdrawalServiceChargeRate
                }}%</span
              ></div
            >
            <div v-if="WithdrawalForm.reserveBalance"
              >预留余额：提现后余额必须在{{ WithdrawalForm.reserveBalance }}元以上</div
            >
          </div>
        </a-form-item>
        <a-form-item label="提现备注" field="remarks">
          <a-input placeholder="请输入提现备注" v-model.trim="showForm.remarks"
        /></a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="cancelscs">取消</a-button>
          <a-button type="primary" @click="OKs">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 设置预警 -->
    <a-modal
      v-model:visible="warnVisible"
      :mask-closable="false"
      title="设置预警"
      @before-close="handleWarnCancel"
      title-align="start"
    >
      <div>
        <a-form ref="warnRef" :auto-label-width="true" :model="warnForm">
          <a-form-item
            label="预警金额"
            :rules="[{ required: true, message: '预警金额不能为空' }]"
            :validate-trigger="['change', 'input']"
            field="warningBalance"
            asterisk-position="end"
          >
            <a-input-number placeholder="请输入预警金额" v-model.trim="warnForm.warningBalance" />
            <template #extra>
              <div>预警金额为空时，将不会提醒</div>
            </template>
          </a-form-item>
        </a-form>
      </div>
      <template #footer>
        <a-space>
          <a-button @click="handleWarnCancel">取消</a-button>
          <a-button type="primary" @click="handleWarnOk">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 实名认证 -->
    <a-modal
      v-model:visible="realShow"
      :mask-closable="false"
      :closable="false"
      :esc-to-close="false"
      title-align="start"
    >
      <template #title> 实名认证 </template>
      <div>
        <div class="type">
          <div
            style="width: 33%"
            v-for="item in configReal.list"
            v-show="configReal.list.length > 1"
            :key="item.type"
            :class="realForm.type == item.type ? 'color' : ''"
            @click="changeType(item.type)"
          >
            <img class="img" :src="item.url" />
            <div :class="realForm.type == item.type ? 'color title' : 'title'">{{ item.name }}</div>
          </div>
        </div>
        <a-form ref="realRef" :auto-label-width="true" :model="realForm" @submit="handleRealOk">
          <a-form-item
            v-if="realForm.type == 0"
            :rules="[{ required: true, message: '真实姓名不能为空' }]"
            :validate-trigger="['change', 'input']"
            label="真实姓名"
            field="name"
            asterisk-position="end"
          >
            <a-input placeholder="请输入真实姓名" v-model.trim="realForm.name" />
          </a-form-item>
          <a-form-item
            v-else
            label="法人姓名"
            :rules="[{ required: true, message: '法人姓名不能为空' }]"
            :validate-trigger="['change', 'input']"
            field="name"
            asterisk-position="end"
          >
            <a-input placeholder="请输入法人姓名" v-model.trim="realForm.name" />
          </a-form-item>
          <a-form-item
            label="身份证号码"
            :rules="[{ required: true, message: '身份证号码不能为空' }]"
            :validate-trigger="['change', 'input']"
            field="identityCard"
            asterisk-position="end"
          >
            <a-input placeholder="请输入身份证号码" v-model.trim="realForm.identityCard" />
          </a-form-item>
          <a-form-item
            label="手机号"
            :rules="[{ required: true, message: '手机号不能为空' }]"
            :validate-trigger="['change', 'input']"
            field="phone"
            asterisk-position="end"
          >
            <a-input placeholder="请输入手机号" v-model.trim="realForm.phone" />
          </a-form-item>
          <a-form-item
            label="验证码"
            :rules="[{ required: true, message: '验证码不能为空' }]"
            :validate-trigger="['change', 'input']"
            field="code"
            asterisk-position="end"
          >
            <a-input placeholder="请输入验证码" v-model.trim="realForm.code" search-button>
              <template #append>
                <a-button
                  type="primary"
                  style="height: 25px; width: 100%"
                  :loading="sendCode.disable"
                  @click="smsFn"
                  >{{ sendCode.codeText }}</a-button
                >
              </template>
            </a-input>
          </a-form-item>
          <a-form-item
            label="身份证正面"
            v-if="configReal.userIdCard"
            field="identityCardImageJust"
          >
            <a-upload
              action="/app/user/file/upload/private"
              @success="onSuccessBcg1"
              :show-file-list="false"
              @error="onError"
              :image-preview="true"
            >
              <template #upload-button>
                <div class="`arco-upload-list-item">
                  <div
                    class="arco-upload-list-picture custom-upload-avatar"
                    v-if="realForm.identityCardImageJust"
                  >
                    <img :src="identityCardImageJust" />
                    <div class="arco-upload-list-picture-mask">
                      <IconEdit />
                    </div>
                  </div>
                  <div class="arco-upload-picture-card" v-else>
                    <div class="arco-upload-picture-card-text">
                      <IconPlus />
                    </div>
                  </div>
                </div>
              </template>
            </a-upload>
          </a-form-item>
          <a-form-item
            label="身份证反面"
            v-if="configReal.userIdCard"
            field="identityCardImageBack"
          >
            <a-upload
              :action="urls"
              :show-file-list="false"
              @success="onSuccessBcg2"
              @error="onError"
              :image-preview="true"
            >
              <template #upload-button>
                <div
                  class="arco-upload-list-picture custom-upload-avatar"
                  v-if="realForm.identityCardImageBack"
                >
                  <img :src="identityCardImageBack" />
                  <div class="arco-upload-list-picture-mask">
                    <IconEdit />
                  </div>
                </div>
                <div class="arco-upload-picture-card" v-else>
                  <div class="arco-upload-picture-card-text">
                    <IconPlus />
                  </div>
                </div>
              </template>
            </a-upload>
          </a-form-item>
          <a-form-item label="手持身份证" v-if="configReal.userHand" field="icp">
            <a-upload
              :action="urls"
              :show-file-list="false"
              @success="onSuccessBcg3"
              @error="onError"
              :image-preview="true"
            >
              <template #upload-button>
                <div
                  class="arco-upload-list-picture custom-upload-avatar"
                  v-if="realForm.identityCardImageHand"
                >
                  <img :src="identityCardImageHand" />
                  <div class="arco-upload-list-picture-mask">
                    <IconEdit />
                  </div>
                </div>
                <div class="arco-upload-picture-card" v-else>
                  <div class="arco-upload-picture-card-text">
                    <IconPlus />
                  </div>
                </div>
              </template>
            </a-upload>
          </a-form-item>
          <a-form-item v-if="realForm.type !== 0" label="执照照片" field="icp">
            <a-upload
              :action="urls"
              :show-file-list="false"
              @success="onSuccessBcg4"
              @error="onError"
              :image-preview="true"
            >
              <template #upload-button>
                <div
                  class="arco-upload-list-picture custom-upload-avatar"
                  v-if="realForm.businessIcense"
                >
                  <img :src="businessIcense" />
                  <div class="arco-upload-list-picture-mask">
                    <IconEdit />
                  </div>
                </div>
                <div class="arco-upload-picture-card" v-else>
                  <div class="arco-upload-picture-card-text">
                    <IconPlus />
                  </div>
                </div>
              </template>
            </a-upload>
          </a-form-item>
          <a-form-item label="其他材料" field="icp">
            <a-upload
              :action="urls"
              :show-file-list="false"
              @error="onError"
              @success="onSuccessBcg5"
              :image-preview="true"
            >
              <template #upload-button>
                <div class="arco-upload-list-picture custom-upload-avatar" v-if="realForm.other">
                  <img :src="other" />
                  <div class="arco-upload-list-picture-mask">
                    <IconEdit />
                  </div>
                </div>
                <div class="arco-upload-picture-card" v-else>
                  <div class="arco-upload-picture-card-text">
                    <IconPlus />
                  </div>
                </div>
              </template>
            </a-upload>
            <template #extra>
              <div>请查看系统实名提示，根据系统实名提示上传材料</div>
            </template>
          </a-form-item>
          <a-form-item>
            <a-button html-type="submit" type="primary" long>立即实名</a-button>
            <template #extra>
              <div
                style="
                  color: #3491fa;
                  font-size: 12px;
                  text-align: center;
                  width: 382px;
                  line-height: 20px;
                "
                ><icon-sound />{{ configReal.userTips }}</div
              >
            </template>
          </a-form-item>
        </a-form>
      </div>
      <template #footer>
        <a-space />
      </template>
    </a-modal>
    <!--抓包 -->
    <a-modal
      v-model:visible="showse1"
      width="800px"
      :mask-closable="false"
      title-align="start"
      @before-close="close"
    >
      <template #title> 访问日志 </template>
      <!-- <div class="alert">
        <div style="color: #fff">
          轮询数据： 成功数量：{{ forms.success }}张 失败数量：{{ forms.error }}张 成功率：{{
            Math.floor((forms.success / (forms.error + forms.success)) * 100)
          }}%
        </div>
      </div> -->
      <div> <a-divider dashed>实时数据</a-divider> </div>
      <div
        :class="top == -1 ? 'mail-container yin' : top >= 0 ? 'mail-container yin1' : ''"
        ref="scrollWrapperRef"
        @scroll="handleScroll"
        style="height: 500px; overflow-y: auto"
      >
        <div v-for="item in dataList" style="margin-top: 10px" :key="item">
          {{ item }}
        </div>
      </div>
      <template #footer>
        <a-space />
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, onMounted, reactive, ref, watch } from 'vue'
  import { Message, Modal } from '@arco-design/web-vue'
  import { useRoute, useRouter } from 'vue-router'
  import homeIcon from '@/assets/real.png'
  import homeIcon1 from '@/assets/one.png'
  import homeIcon2 from '@/assets/two.png'
  import { useDebounceFn, useFullscreen } from '@vueuse/core'
  import useCommonStore from '@/store/modules/common'
  import useEmit from '@/hooks/useEmit'
  import useAppConfigStore from '@/store/modules/app-config'
  import { formpost, get, post } from '@/api/http'
  import {
    balancePay,
    qr,
    news,
    feepayment,
    unreadannouncement,
    readannouncement,
    withdrawal,
    cloudRefresh,
    systemAdmin,
  } from '@/api/url'
  import {
    userDetail,
    getAboutUserNotice,
    addRead,
    withdrawalApply,
    withdrawalCode,
    balanceSet,
    configurationReal,
    configReals,
    sms,
    settingget,
  } from '@/api/user'

  export default defineComponent({
    name: 'ActionItems',
    components: {
      // SearchIcon,
      // SettingIcon,
      // ExpandIcon,
      // NotificationsIcon,
      // RefreshIcon,
    },
    setup() {
      const warnVisible = ref(false)
      const warnForm = ref({
        warningBalance: '',
      })
      const warnRef = ref()
      const position: any = ref(['1'])
      const url: any = ref('')
      const visiblesa: any = ref(false)
      const imgUrl: any = ref('')
      const imgUrls: any = ref('')
      const useCommon = useCommonStore()
      const showSearchContent = ref(false)
      const searchContent = ref('')
      const settingRef = ref()
      const renewForm: any = ref({})
      const badgeValue = ref(3)
      const appStore = useAppConfigStore()
      const router = useRouter()
      const route = useRoute()
      const emitter = useEmit()
      const accList: any = ref([])
      const show = ref(true)
      const showV = ref(true)
      const showVs = ref(false)
      const loading = ref(false)
      const loadings = ref(false)
      const visible = ref(false)
      const visibles = ref(false)
      const renewVisible = ref(false)
      const path = ref('')
      const uid = ref('')
      const showse = ref(false)
      const detailRef = ref()
      const data: any = ref({})
      const userForm: any = ref({})
      const detailForm = reactive({
        name: 0,
        price: 0,
        realNum: 0,
        payType: 0,
        payList: [{ id: 1, name: '支付商户' }],
        payId: '',
      })
      const seachForm = reactive({
        imgUrl: '',
        payForm: {},
        list: [],
        type: 0,
      })
      function beforeClose1() {
        position.value = '1'
        visiblesa.value = false
      }
      const tiRef = ref()
      const showForm = ref({
        type: '', // 提现途径 0支付宝 1微信 2银行卡
        amount: 1, // 提现金额
        code: '', //短信验证码,
        text: '暂未预估提现',
        remarks: '',
      })
      //实名设置
      const urls = ref('/app/user/file/upload/private')
      const configReal: any = ref({})
      const realShow = ref(false)
      const typeList: any = ref([
        {
          type: 0,
          name: '个人实名',
          url: homeIcon,
        },
        {
          type: 1,
          name: '个体户实名',
          url: homeIcon1,
        },
        {
          type: 2,
          name: '企业实名',
          url: homeIcon2,
        },
      ])
      const realForm: any = ref({
        name: '', // 姓名
        phone: '', // 手机号
        code: '',
        identityCard: '', // 身份证号
        identityCardImageJust: '', // 身份证正面
        identityCardImageBack: '', // 身份证反面
        identityCardImageHand: '', // 手持身份证
        businessIcense: '', // 营业执照
        other: '', // 其它材料
        type: 0, // 0个人实名 1个体实名 2企业实名
      })
      const realRef = ref()
      //实名验证
      const smsFn = () => {
        realRef.value.validateField('phone', (value: any) => {
          if (!value) {
            get({
              url: sms,
              data: { phone: realForm.value.phone },
            }).then((res) => {
              if (res.code == 0) {
                Message.success(res.msg)
                let time = 60
                times.value = setInterval(() => {
                  sendCode.disable = true
                  time--
                  sendCode.codeText = time + 's重新发送'
                  if (time <= 0) {
                    clearInterval(times.value)
                    sendCode.codeText = '获取验证码'
                    sendCode.disable = false
                  }
                }, 1000)
              }
            })
          }
        })
      }
      const onError = (response: any) => {
        Message.error(response.response.msg)
      }
      //背景图上传
      const onSuccessBcg1 = (fileItem: any) => {
        realForm.value.identityCardImageJust = fileItem.response.data.path
        identityCardImageJust.value =
          window.location.protocol +
          '//' +
          window.location.host +
          '/app/user/file/download/private?path=' +
          encodeURIComponent(fileItem.response.data.path)
      }
      const onSuccessBcg2 = (fileItem: any) => {
        realForm.value.identityCardImageBack = fileItem.response.data.path
        identityCardImageBack.value =
          window.location.protocol +
          '//' +
          window.location.host +
          '/app/user/file/download/private?path=' +
          encodeURIComponent(fileItem.response.data.path)
      }
      const onSuccessBcg3 = (fileItem: any) => {
        realForm.value.identityCardImageHand = fileItem.response.data.path
        identityCardImageHand.value =
          window.location.protocol +
          '//' +
          window.location.host +
          '/app/user/file/download/private?path=' +
          encodeURIComponent(fileItem.response.data.path)
      }
      const onSuccessBcg4 = (fileItem: any) => {
        realForm.value.businessIcense = fileItem.response.data.path
        businessIcense.value =
          window.location.protocol +
          '//' +
          window.location.host +
          '/app/user/file/download/private?path=' +
          encodeURIComponent(fileItem.response.data.path)
      }
      const onSuccessBcg5 = (fileItem: any) => {
        realForm.value.other = fileItem.response.data.path
        other.value =
          window.location.protocol +
          '//' +
          window.location.host +
          '/app/user/file/download/private?path=' +
          encodeURIComponent(fileItem.response.data.path)
      }
      const identityCardImageJust = ref('') // 身份证正面
      const identityCardImageBack = ref('') // 身份证反面
      const identityCardImageHand = ref('') // 手持身份证
      const businessIcense = ref('') // 营业执照
      const other = ref('') // 其它材料
      const changeType = (val: any) => {
        console.log(val)
        realForm.value.type = val
      }
      const handleRealCancel = () => {
        realRef.value?.resetFields()
        realShow.value = false
        clearInterval(times.value)
        sendCode.codeText = '获取验证码'
        sendCode.disable = false
      }
      const handleRealOk = () => {
        realRef.value?.validate().then((error: any) => {
          if (!error) {
            post({
              url: configReals + '?code=' + realForm.value.code,
              data: { ...realForm.value },
            }).then((res) => {
              if (res.code == 0) {
                handleRealCancel()
                userDetailFn()
                Message.success(res.msg)
              }
            })
          }
        })
      }
      const configRealFn = () => {
        get({
          url: configurationReal,
          data: {},
        }).then((res) => {
          if (res.code == 0) {
            res.data.list = []
            res.data.userSubject.forEach((item: any) => {
              typeList.value.forEach((items: any) => {
                if (items.type == item) {
                  res.data.list.push(items)
                }
              })
            })
            realForm.value.type = res.data.list[0].type
            configReal.value = res.data
            if (res.data.userAlert == true) {
              realShow.value = true
            }
          }
        })
      }
      function openBlance() {
        if (userForm.value.warningBalance) {
          warnForm.value.warningBalance = userForm.value.warningBalance
        }
        warnVisible.value = true
      }
      const handleWarnOk = () => {
        warnRef.value?.validate().then((error: any) => {
          if (!error) {
            formpost({
              url: balanceSet,
              data: { ...warnForm.value },
            }).then((res) => {
              if (res.code == 0) {
                userDetailFn()
                handleWarnCancel()
                Message.success(res.msg)
              }
            })
          }
        })
      }
      const handleWarnCancel = () => {
        warnRef.value?.resetFields()
        warnVisible.value = false
      }

      function href() {
        window.open('https://yingmengyunkeji.yuque.com/org-wiki-xk13x8/pg0n98?#')
      }
      //提交申请
      const OKs = () => {
        tiRef.value?.validate().then((error: any) => {
          if (!error) {
            formpost({
              url: withdrawalApply,
              data: { ...showForm.value },
            }).then((res) => {
              if (res.code == 0) {
                Message.success(res.msg)
                cancelscs()
              }
            })
          }
        })
      }
      const open = () => {
        showVs.value = true
        getWithdrawal()
      }
      const sendCode = reactive({
        codeText: '发送验证码',
        disable: false,
      })
      const cancelscs = () => {
        tiRef.value?.resetFields()
        showForm.value.text = '暂未预估提现'
        showVs.value = false
      }
      const lists: any = ref([])
      const list = ref([
        {
          value: 1,
          name: '微信',
        },
        {
          value: 0,
          name: '支付宝',
        },

        {
          value: 2,
          name: '银行卡',
        },
      ])
      const times = ref()
      const smsFns = () => {
        get({
          url: withdrawalCode,
          data: {},
        }).then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            let time = 60
            times.value = setInterval(() => {
              sendCode.disable = true
              time--
              sendCode.codeText = time + 's重新发送'
              if (time <= 0) {
                clearInterval(times.value)
                sendCode.codeText = '获取验证码'
                sendCode.disable = false
              }
            }, 1000)
          }
        })
      }
      const WithdrawalForm: any = ref({})
      function getWithdrawal() {
        get({
          url: withdrawal,
          data: {},
        }).then((res) => {
          lists.value = []
          res.data.withdrawalRoutes.forEach((item: any) => {
            list.value.forEach((items) => {
              if (item == items.value) {
                lists.value.push(items)
              }
            })
          })
          showForm.value.type = res.data.withdrawalRoutes[0]
          WithdrawalForm.value = res.data
          console.log(WithdrawalForm.value)
        })
      }
      const yugu = () => {
        let fei = 0

        if (WithdrawalForm.value.withdrawalServiceChargeMode == 0) {
          console.log('1')
          fei = WithdrawalForm.value.withdrawalServiceChargeFixedAmount
        } else if (WithdrawalForm.value.withdrawalServiceChargeMode == 1) {
          fei =
            Math.floor(
              ((showForm.value.amount * WithdrawalForm.value.withdrawalServiceChargeRate) / 100) *
                100
            ) / 100
          console.log('2')
        } else if (WithdrawalForm.value.withdrawalServiceChargeMode == 2) {
          console.log(WithdrawalForm.value.withdrawalServiceChargeRate)
          console.log(showForm.value.amount * WithdrawalForm.value.withdrawalServiceChargeRate)
          fei =
            WithdrawalForm.value.withdrawalServiceChargeFixedAmount +
            Math.floor(
              ((showForm.value.amount * WithdrawalForm.value.withdrawalServiceChargeRate) / 100) *
                100
            ) /
              100
        }

        let dai = 0
        if (WithdrawalForm.value.withholdingTax) {
          dai =
            Math.floor(
              ((showForm.value.amount * WithdrawalForm.value.withholdingTax) / 100) * 100
            ) / 100
        }

        showForm.value.text =
          '实际到账：' +
          Math.floor((showForm.value.amount - fei - dai) * 100) / 100 +
          '元，代扣税' +
          dai +
          '元，提现手续费' +
          fei +
          '元'
      }

      const openUrl = () => {
        getUrl()
        visiblesa.value = true
      }
      const returnUrl = (val: any) => {
        return window.location.protocol + '//' + window.location.host + val
      }
      const returnCode = (val) => {
        return (
          window.location.protocol +
          '//' +
          window.location.host +
          qr +
          '?content=' +
          encodeURIComponent(window.location.protocol + '//' + window.location.host + val)
        )
      }
      const getUrl = (val?: any) => {
        if (val !== undefined) {
          if (val.length == 0) {
            position.value = ['1']
          } else {
            position.value = val
          }
        } else {
          position.value = ['1']
        }
        // console.log(val)
        // console.log(position.value)
        // console.log(position.value.length)
        // if (position.value[0].length < 1) {
        //   position.value = ['1']
        // }
        if (position.value[0] == '1') {
          url.value = window.location.protocol + '//' + window.location.host
          imgUrl.value =
            window.location.protocol +
            '//' +
            window.location.host +
            qr +
            '?content=' +
            encodeURIComponent(window.location.protocol + '//' + window.location.host)
        } else if (position.value[0] == '2') {
          url.value = window.location.protocol + '//' + window.location.host + '/children/login'
          imgUrl.value =
            window.location.protocol +
            '//' +
            window.location.host +
            qr +
            '?content=' +
            encodeURIComponent(
              window.location.protocol + '//' + window.location.host + '/children/login'
            )
        } else if (position.value[0] == '3') {
          url.value = window.location.protocol + '//' + window.location.host + '/m'
          imgUrl.value =
            window.location.protocol +
            '//' +
            window.location.host +
            qr +
            '?content=' +
            encodeURIComponent(window.location.protocol + '//' + window.location.host + '/m')
        } else {
          url.value = window.location.protocol + '//' + window.location.host + '/wap/'
          imgUrl.value =
            window.location.protocol +
            '//' +
            window.location.host +
            qr +
            '?content=' +
            encodeURIComponent(window.location.protocol + '//' + window.location.host + '/wap/')
        }
      }
      //下载图片
      function downloadIamge(imgsrc: any, name: any) {
        //下载图片地址和图片名
        var image = new Image()
        // 解决跨域 Canvas 污染问题
        image.setAttribute('crossOrigin', 'anonymous')
        image.onload = function () {
          var canvas = document.createElement('canvas')
          canvas.width = image.width
          canvas.height = image.height
          var context = canvas.getContext('2d')
          context.drawImage(image, 0, 0, image.width, image.height)
          var url = canvas.toDataURL('image/png') //得到图片的base64编码数据
          var a = document.createElement('a') // 生成一个a元素
          var event = new MouseEvent('click') // 创建一个单击事件
          a.download = name || 'photo' // 设置图片名称
          a.href = url // 将生成的URL设置为a.href属性
          a.dispatchEvent(event) // 触发a的单击事件
        }
        image.src = imgsrc
      }
      // 改downs这个函数就行，downloadIamge（‘图片下载地址’，图片名字）
      function downs() {
        // 主要是为了名字不重复
        var name = new Date().getTime()
        downloadIamge(imgUrl.value, name)
      }
      const qiang = ref(false)

      const changeFnswww = () => {
        detailForm.realNum = detailForm.name - detailForm.price
        getPay(detailForm.payType)
      }
      const beforClosew = () => {
        userDetailFn()
        visibles.value = false
      }
      const newsFn = () => {
        get({
          url: news,
          data: {},
        }).then((res) => {
          if (res.code == 0) {
            if (
              res.data.updateLogBean &&
              res.data.updateLogBean.versionId > res.data.clientVersion
            ) {
              renewVisible.value = true
              data.value = res.data.updateLogBean
            } else {
              // money()
              Notice()
            }
          }
        })
      }
      const Notice = () => {
        get({
          url: unreadannouncement,
          data: {},
        }).then((res) => {
          if (res.code == 0) {
            if (res.data.length > 0) {
              res.data.forEach((item: any) => {
                item.show = true
              })
              accList.value = res.data
            } else {
              money(0)
            }
          }
        })
      }

      const Notices = () => {
        get({
          url: getAboutUserNotice,
          data: { isRead: false, forceOpen: 1 },
        }).then((res) => {
          if (res.data.length > 0) {
            accList.value = []
            res.data.forEach((item: any) => {
              item.show = true
              accList.value.unshift(item)
            })
          }
        })
      }
      const beforeClose = (val: any) => {
        if (window.location.pathname.split('/')[1] == 'children') {
          get({
            url: addRead,
            data: {
              noticeId: val.id,
            },
          })
            .then((res) => {
              if (res.code == 0) {
                Message.success(res.msg)
                Notices()
              }
            })
            .catch(() => {
              val.show = true
            })
        } else {
          get({
            url: readannouncement,
            data: {
              id: val.id,
            },
          })
            .then((res) => {
              if (res.code == 0) {
                Message.success(res.msg)
                Notice()
              }
            })
            .catch(() => {
              val.show = true
            })
        }
      }
      const money = (val?: any) => {
        get({
          url: feepayment,
          data: {},
        }).then((res) => {
          if (res.code == 0) {
            if (val == 0) {
              if (res.data.orders.length > 0) {
                Modal.warning({
                  title: '金额缴纳提醒',
                  content:
                    '系统当前存在未缴纳的金额，请及时进行金额缴纳，不及时缴纳可能会影响您的使用哦！',
                  cancelText: '取消',
                  titleAlign: 'start',
                  hideCancel: true,
                  okText: '立即缴纳',
                  maskClosable: false,
                  escToClose: false,
                  onOk: () => {
                    router.push('/home/fee')
                  },
                })
              }
            } else {
              if (res.data.forceEject == true) {
                Modal.warning({
                  title: '金额缴纳提醒',
                  content:
                    '系统当前存在未缴纳的金额，请及时进行金额缴纳，不及时缴纳可能会影响您的使用哦！',
                  cancelText: '取消',
                  titleAlign: 'start',
                  hideCancel: true,
                  okText: '立即缴纳',
                  maskClosable: false,
                  escToClose: false,
                  onOk: () => {
                    router.push('/home/fee')
                  },
                })
              }
            }
          }
        })
      }
      const chong = () => {
        visible.value = true
        getPay(detailForm.payType)
      }
      const typelist: any = ref([])
      const getPay = (val: any) => {
        detailForm.payId = ''
        detailForm.price = 0
        uid.value = ''
        path.value = ''
        useCommon.getPayList(val).then((res: any) => {
          typelist.value = res.data
          detailForm.payList = res.data[val].list
          detailForm.payId = res.data[val].list[0].id
          detailForm.price =
            Math.floor((detailForm.name * res.data[val].list[0].serviceCharge * 100) / 100) / 100
          if (res.data[val].list[0].payProduct.type == 2) {
            if (res.data[val].list[0].payProduct.path) {
              uid.value = guid2()
              console.log(uid.value)
              path.value = `${window.location.protocol}//${window.location.host}${res.data[val].list[0].payProduct.path}?payId=${detailForm.payId}&state=${uid.value}&redirectUri=${window.location.protocol}//${window.location.host}/web/template/wechat/login/success`
            }
          }
        })
      }
      const paySuccessFn = () => {
        loadings.value = true
        get({
          url: balancePay,
          data: {
            payId: detailForm.payId,
            amount: detailForm.name,
            state: uid.value,
          },
        })
          .then((res) => {
            if (res.code == 0) {
              loadings.value = false
              if (uid.value == '') {
                visibles.value = false
                Message.success(res.msg)
              } else {
                seachForm.payForm = res.data
                loadings.value = false

                if (res.data.qrcode && res.data.openUrl) {
                  if (is_weixn() == false) {
                    seachForm.imgUrl = `${window.location.protocol}//${
                      window.location.host
                    }${qr}?content=${encodeURIComponent(res.data.qrcode)}`
                    path.value = ''
                    visibles.value = true
                  } else {
                    // let a = document.createElement('a')
                    // a.setAttribute('href', res.data.openUrl)
                    // a.setAttribute('target', '_blank')
                    // document.body.appendChild(a)
                    // a.click()
                    // a.remove()
                    if (isIOS() == true) {
                      window.location.href = res.data.openUrl
                    } else {
                      window.open(res.data.openUrl)
                    }
                  }
                } else {
                  if (res.data.qrcode) {
                    seachForm.imgUrl = `${window.location.protocol}//${
                      window.location.host
                    }${qr}?content=${encodeURIComponent(res.data.qrcode)}`
                    path.value = ''
                    visibles.value = true
                  } else {
                    // let a = document.createElement('a')
                    // a.setAttribute('href', res.data.openUrl)
                    // a.setAttribute('target', '_blank')
                    // document.body.appendChild(a)
                    // a.click()
                    // a.remove()
                    if (isIOS() == true) {
                      window.location.href = res.data.openUrl
                    } else {
                      window.open(res.data.openUrl)
                    }
                  }
                }
              }
            }
          })
          .catch(() => {
            loadings.value = false
          })
      }

      function onShowSearch() {
        emitter?.emit('show-search')
      }
      const { isSupported, enter, isFullscreen, exit } = useFullscreen(document.documentElement)
      if (window.location.pathname.split('/')[1] == 'children') {
        showV.value = false
      }
      function onScreenFull() {
        if (!isSupported) {
          Message.error('当前浏览器不支持全屏操作')
          return false
        }
        aab.value = isFullscreen.value
        if (isFullscreen.value) {
          exit()
        } else {
          enter()
        }
      }
      const debouncedFn = useDebounceFn(() => {
        router.replace({ path: '/redirect' + route.path })
      }, 200)

      function onRefrehRoute() {
        get({
          url: cloudRefresh,
          data: {},
        })
          .then(() => {})
          .catch(() => {})
        debouncedFn()
      }
      function onShowSetting() {
        emitter?.emit('show-setting')
      }

      function isIOS() {
        const userAgent = navigator.userAgent.toLowerCase()
        return /iphone|ipad|ipod/.test(userAgent)
      }

      function guid2() {
        function S4() {
          return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
        }
        return S4() + S4() + '-' + S4() + '-' + S4() + '-' + S4() + '-' + S4() + S4() + S4()
      }

      const ok = () => {
        console.log(path.value)
        detailRef.value.validate((error: any) => {
          if (!error) {
            if (path.value != '') {
              seachForm.imgUrl = `${window.location.protocol}//${
                window.location.host
              }${qr}?content=${encodeURIComponent(path.value)}`
              console.log(seachForm.imgUrl)
              visibles.value = true
            } else {
              loading.value = true
              get({
                url: balancePay,
                data: {
                  payId: detailForm.payId,
                  amount: detailForm.name,
                },
              })
                .then((res) => {
                  seachForm.payForm = res.data
                  loading.value = false
                  if (res.data.qrcode && res.data.openUrl) {
                    if (is_weixn() == false) {
                      seachForm.imgUrl = `${window.location.protocol}//${
                        window.location.host
                      }${qr}?content=${encodeURIComponent(res.data.qrcode)}`
                      path.value = ''
                      visibles.value = true
                    } else {
                      // let a = document.createElement('a')
                      // a.setAttribute('href', res.data.openUrl)
                      // a.setAttribute('target', '_blank')
                      // document.body.appendChild(a)
                      // a.click()
                      // a.remove()
                      if (isIOS() == true) {
                        window.location.href = res.data.openUrl
                      } else {
                        window.open(res.data.openUrl)
                      }
                    }
                  } else {
                    if (res.data.qrcode) {
                      seachForm.imgUrl = `${window.location.protocol}//${
                        window.location.host
                      }${qr}?content=${encodeURIComponent(res.data.qrcode)}`
                      path.value = ''
                      visibles.value = true
                    } else {
                      // let a = document.createElement('a')
                      // a.setAttribute('href', res.data.openUrl)
                      // a.setAttribute('target', '_blank')
                      // document.body.appendChild(a)
                      // a.click()
                      // a.remove()
                      if (isIOS() == true) {
                        window.location.href = res.data.openUrl
                      } else {
                        window.open(res.data.openUrl)
                      }
                    }
                  }
                })
                .catch(() => {
                  loading.value = false
                })
            }
          }
        })
      }
      const getPayFn = (val: any) => {
        path.value = ''
        detailForm.payList.forEach((item: any) => {
          if (item.id == val) {
            detailForm.payId = val
            detailForm.price = Math.floor((detailForm.name * item.serviceCharge * 100) / 100) / 100
            if (item.payProduct.type == 2) {
              if (item.payProduct.path) {
                if (uid.value == '') {
                  uid.value = guid2()
                }
                path.value = `${window.location.protocol}//${window.location.host}${item.payProduct.path}?payId=${val}&state=${uid.value}&redirectUri=${window.location.protocol}//${window.location.host}/web/template/wechat/login/success`
              }
            }
          }
        })
      }
      function is_weixn() {
        var ua: any = navigator.userAgent.toLowerCase()
        if (ua.match(/MicroMessenger/i) == 'micromessenger') {
          seachForm.type = 1
          return true
        } else {
          seachForm.type = 2
          return false
        }
      }

      const beforClose = () => {
        detailForm.payId = ''
        detailForm.payList = []
        detailForm.payType = 0
        detailForm.price = 0
        detailForm.name = ''
        detailForm.realNum = 0
        path.value = ''
        visible.value = false
      }
      const userDetailFn = () => {
        get({
          url: userDetail,
          data: {},
        }).then((res) => {
          if (res.code == 0) {
            userForm.value = res.data
            if (res.data.realName == 0 || res.data.realName == 1) {
              Notices()
            } else {
              configRealFn()
            }
            if (res.data.customLogo == true) {
              systemAdminFns()
            } else {
              systemAdminFn()
            }
          }
        })
      }

      const source = ref()
      const SSE = () => {
        if (window.EventSource) {
          // 建立连接
          source.value = new EventSource('/app/update/start')
          /**
           * 连接一旦建立，就会触发open事件
           */
          source.value.onopen = function (e: any) {
            console.log('建立连接', e)
          }
          /**
           * 客户端收到服务器发来的数据
           */
          source.value.onmessage = function (e: any) {
            showse.value = true
            const data = JSON.parse(e.data)
            if (data.proportion) {
              data.proportion = data.proportion / 100
              renewForm.value = data
            } else {
              renewForm.value = data
              if (data.type == -1) {
                // Message.error(data.message)
              } else if (data.type == 1) {
                location.reload()
              }
            }
          }
          /**
           * 如果发生通信错误（比如连接中断），就会触发error事件
           */
          source.value.onerror = function (e: any) {
            if (e.readyState === EventSource.CLOSED) {
              console.log('连接关闭')
            } else {
              Message.success('更新成功，等待10秒刷新页面')
              renewForm.value = {}
              renewVisible.value = false
              showse.value = false
              source.value.close()
            }
          }
        } else {
          console.log('浏览器不支持SSE')
        }
      }

      // 监听当前路由
      watch(
        () => router.currentRoute.value,
        (newValue: any) => {
          if (newValue.name !== '金额缴纳') {
            if (window.location.pathname.split('/')[1] !== 'children') {
              newsFn()
            } else {
              // userDetailFn()
            }
          } else if (newValue.name == '系统监控') {
          }
        },
        { immediate: true }
      )
      const urlImg = ref('')
      //获取
      const systemAdminFn = () => {
        get({
          url: systemAdmin,
        }).then((res) => {
          if (res.data) {
            if (res.data.logoImage) {
              urlImg.value = res.data.logoImage
            } else {
              urlImg.value = '/favicon.ico'
            }
          } else {
            urlImg.value = '/favicon.ico'
          }
        })
      }
      //获取
      const systemAdminFns = () => {
        get({
          url: settingget,
        }).then((res) => {
          if (res.data) {
            if (res.data.logoImage) {
              urlImg.value = res.data.logoImage
            } else {
              get({
                url: systemAdmin,
              }).then((res) => {
                if (res.data) {
                  if (res.data.logoImage) {
                    urlImg.value = res.data.logoImage
                  } else {
                    urlImg.value = '/favicon.ico'
                  }
                } else {
                  urlImg.value = '/favicon.ico'
                }
              })
            }
          } else {
            get({
              url: systemAdmin,
            }).then((res) => {
              if (res.data) {
                if (res.data.logoImage) {
                  urlImg.value = res.data.logoImage
                } else {
                  urlImg.value = '/favicon.ico'
                }
              } else {
                urlImg.value = '/favicon.ico'
              }
            })
          }
        })
      }

      const balanceList: any = ref([])
      const activeBalanceKey = ref(0)
      onMounted(async () => {
        if (window.location.pathname.split('/')[1] == 'children') {
          userDetailFn()
          get({
            url: systemAdmin,
          }).then((res) => {
            if (res.data) {
              if (res.data.balance) {
                balanceList.value = res.data.balance.split(',').map(Number)
                activeBalanceKey.value = 0
                detailForm.name = balanceList.value[0]
                detailForm.realNum = detailForm.name - detailForm.price
                getPay(detailForm.payType)
              } else {
                balanceList.value = []
              }
            } else {
              balanceList.value = []
            }
          })
        } else {
          systemAdminFn()
        }
      })
      const aab = ref(true)
      const showse1 = ref(false)
      const source1 = ref()
      const dataList: any = ref([])
      function close() {
        dataList.value = []
        source1.value.close()
        showse1.value = false
        console.log(111)
      }
      const top = ref(0)
      const scrollWrapperRef = ref() //滚动区域的父元素
      const handleScroll = () => {
        //滚动触发的事件
        const scrollWrapper = scrollWrapperRef.value // 获取滚动容器
        const { scrollTop, clientHeight, scrollHeight } = scrollWrapper // 获取滚动数据
        // console.log('scrollWrapper', scrollTop, clientHeight, scrollHeight)
        // 判断是否滚动到底部
        if (scrollTop == 0) {
          top.value = scrollTop
        } else if (scrollTop + clientHeight >= scrollHeight - 10) {
          top.value = -1
        }
      }

      function logFn() {
        showse1.value = true
        if (window.EventSource) {
          // if (showsa.value == true) {
          // } else {
          // 建立连接
          source1.value = new EventSource('/app/log/get')
          /**
           * 连接一旦建立，就会触发open事件
           */

          source1.value.onopen = function (e: any) {
            console.log('建立连接', e)
          }
          /**
           * 客户端收到服务器发来的数据
           */
          source1.value.onmessage = function (e: any) {
            console.log(e)
            if (dataList.value.length < 1000) {
              dataList.value.unshift(e.data)
            } else {
              dataList.value.unshift(e.data)
              dataList.value.pop()
            }
          }
          /**
           * 如果发生通信错误（比如连接中断），就会触发error事件
           */
          source1.value.onerror = function (e: any) {
            // showsa.value = false
            if (e.readyState === EventSource.CLOSED) {
              console.log('连接关闭')
            } else {
              Message.error('超时请重试')
              // renewForm.value = {}
              showse1.value = false
              source1.value.close()
            }
          }
          // }
        } else {
          console.log('浏览器不支持SSE')
        }
      }
      function clickBalance(banlance: any, index: any) {
        detailForm.name = banlance
        activeBalanceKey.value = index
        detailForm.realNum = detailForm.name - detailForm.price
        getPay(detailForm.payType)
      }
      return {
        clickBalance,
        activeBalanceKey,
        balanceList,
        urlImg,
        handleScroll,
        top,
        logFn,
        close,
        dataList,
        source1,
        showse1,
        aab,
        realRef,
        urls,
        identityCardImageJust,
        identityCardImageBack,
        identityCardImageHand,
        businessIcense,
        other,
        returnUrl,
        returnCode,
        onSuccessBcg1,
        onSuccessBcg2,
        onSuccessBcg3,
        onSuccessBcg4,
        onSuccessBcg5,
        onError,
        smsFn,
        handleRealOk,
        handleRealCancel,
        configRealFn,
        changeType,
        realShow,
        configReal,
        useCommon,
        typeList,
        realForm,
        href,
        openBlance,
        handleWarnOk,
        handleWarnCancel,
        warnRef,
        warnForm,
        warnVisible,
        yugu,
        smsFns,
        sendCode,
        showVs,
        cancelscs,
        OKs,
        open,
        getWithdrawal,
        beforeClose,
        accList,
        router,
        beforClosew,
        userDetailFn,
        renewForm,
        userForm,
        renewVisible,
        settingRef,
        beforClose,
        ok,
        showSearchContent,
        searchContent,
        badgeValue,
        appStore,
        onShowSearch,
        onScreenFull,
        onRefrehRoute,
        onShowSetting,
        show,
        showV,
        loading,
        visible,
        visibles,
        detailForm,
        seachForm,
        is_weixn,
        getPayFn,
        getPay,
        chong,
        paySuccessFn,
        detailRef,
        path,
        uid,
        loadings,
        SSE,
        showse,
        data,
        changeFnswww,
        typelist,
        downs,
        downloadIamge,
        getUrl,
        openUrl,
        beforeClose1,
        position,
        url,
        visiblesa,
        imgUrl,
        showForm,
        lists,
        WithdrawalForm,
        tiRef,
      }
    },
  })
</script>

<style lang="less" scoped>
  .box1 {
    width: 100%;
    height: 35px;
    padding: 0px 10px;
    line-height: 35px;
    border-radius: 5px;
    background-color: #f2f3f5;
    font-size: 13px;
    color: #333333;
  }
  :deep(.arco-popover-title) {
    text-align: center !important;
    font-size: 14px !important;
  }
  .codeBtn {
    width: 120px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    .codeImg {
      margin: 0px 0px 10px;
      display: block;
      width: 100px;
    }
    .btnss {
      width: 100%;
      height: 30px;
      margin-top: 10px;
      border-radius: 5px;
      color: #fff;
      background-color: rgb(var(--primary-6));
    }
  }
  .box2 {
    width: 100%;
    height: 35px;
    padding: 0px 10px;
    border-radius: 5px;
    background-color: #f2f3f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .links {
      font-size: 13px;
      color: #333333;
      width: calc(100% - 110px);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .rights {
      display: flex;
      align-items: center;
      font-size: 13px;
      color: #3491fa;
      cursor: pointer;
    }
  }
  .active {
    color: #3491fa;
  }
  :deep(.arco-collapse-item-content) {
    background-color: transparent;
  }
  .color {
    cursor: pointer;
    color: #3491fa;
  }
  .type {
    display: flex;
    text-align: center;
    margin-bottom: 20px;
    justify-content: center;
    .img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
    }

    .title {
      font-size: 16px;
    }
  }
  .arco-dropdown-open .arco-icon-down {
    transform: rotate(180deg);
  }
  .action-items-wrapper {
    width: 102%;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1;
    background-color: var(--color-bg-2);
    padding: 5px 0;

    border-bottom: 1px solid rgba(229, 231, 225, 0.3);
    padding-right: 20px;
    .aaa {
      position: relative;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      z-index: 1;
      // background-color: var(--color-neutral-2);
      padding: 7px 0px;
      border-radius: 4px;
      width: 100%;
    }
    .action-item {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      height: 18px;

      &:hover {
        cursor: pointer;
        background-color: transparent;
      }
    }
  }
  :deep(.arco-radio-button) {
    padding: 0px 30px;
  }
  :deep(#notice ul) {
    list-style: disc !important;
  }

  .activeBalance {
    width: calc((100% - 40px) / 3);
    border-radius: 5px;
    line-height: 80px;
    height: 80p;
    margin-bottom: 10px;
    border: 1px solid #3491fa;
  }
  .activeBalance1 {
    width: calc((100% - 40px) / 3);
    border-radius: 5px;
    line-height: 80px;
    height: 80p;
    margin-bottom: 10px;
    border: 1px solid #f2f3f5;
  }
</style>
